<template>
  <div class="common-layout">
    <el-container>
      <el-aside width="600px">
        <silly-category-json-edit v-model="categoryData"></silly-category-json-edit>
      </el-aside>
      <el-main style="padding: 0">
        <el-container>
          <el-aside width="300px">
            <silly-category-json-tree v-model="categoryData" @node-click="editNodeData"></silly-category-json-tree>
          </el-aside>
          <el-main>
            <el-scrollbar height="calc(100vh - 200px)" style="padding-right: 20px;">
              <template v-if="selectLevel === 1">
                <silly-category-property-schema-form :key="categoryData.category"/>
              </template>
              <template v-if="selectLevel === 2">
                <silly-category-master-schema-form :key="selectCategory"
                                                   :edit-data="[selectCategory]"/>
              </template>
              <template v-if="selectLevel === 3">
                <silly-category-node-schema-form :key="selectCategory + '_' + selectNodeKey"
                                                 :edit-data="[selectCategory, selectNodeKey]"/>
              </template>
              <template v-if="selectLevel === 4">
                <silly-category-variable-schema-form
                    :key="selectCategory + '_' + selectNodeKey + '_' + selectVariableName"
                    :edit-data="[selectCategory,selectNodeKey,selectVariableName]"/>
              </template>
            </el-scrollbar>
          </el-main>
        </el-container>

      </el-main>
    </el-container>
  </div>
</template>

<script lang="ts" setup>
import {ref} from "vue";
import SillyCategoryJsonTree from '@/components/schema/SillyCategoryJsonTree';
import SillyCategoryJsonEdit from '@/components/schema/SillyCategoryJsonEdit';
import SillyCategoryPropertySchemaForm from '@/components/schema/SillyCategoryPropertySchemaForm';
import SillyCategoryMasterSchemaForm from '@/components/schema/SillyCategoryMasterSchemaForm';
import SillyCategoryNodeSchemaForm from '@/components/schema/SillyCategoryNodeSchemaForm';
import SillyCategoryVariableSchemaForm from '@/components/schema/SillyCategoryVariableSchemaForm';
import {TreeNode, TreeNodeData} from "element-plus/es/components/tree-v2/src/types";
import {useUserOptionStore} from "@/core/common/StorageUtil";

const userOptionStore = useUserOptionStore();
const categoryData = userOptionStore.businessJsonData;

const selectLevel = ref<number>(0);
const selectCategory = ref<any>();
const selectNodeKey = ref<any>();
const selectVariableName = ref<any>();
const editNodeData = (data: TreeNodeData, node: TreeNode, e: MouseEvent) => {
  selectLevel.value = 0;
  if (node.level === 1) {
    selectCategory.value = node.label;
    selectNodeKey.value = null;
    selectVariableName.value = null;
    if (!categoryData.category) {
      categoryData.category = node.label;
    }
  } else if (node.level === 2) {
    selectCategory.value = node.label;
    selectNodeKey.value = null;
    selectVariableName.value = null;
    if (!categoryData.master[selectCategory.value]) {
      categoryData.master[selectCategory.value] = {processKey: selectCategory.value};
    }
  } else if (node.level === 3) {
    selectCategory.value = node.parent?.label;
    selectNodeKey.value = node.label;
    selectVariableName.value = null;
    if (!categoryData.master[selectCategory.value].node) {
      categoryData.master[selectCategory.value].node = {};
    }
    if (!categoryData.master[selectCategory.value].node[selectNodeKey.value]) {
      categoryData.master[selectCategory.value].node[selectNodeKey.value] = {nodeKey: selectNodeKey.value}
    }
  } else if (node.level === 4) {
    selectCategory.value = node.parent?.parent?.label;
    selectNodeKey.value = node.parent?.label;
    selectVariableName.value = node.label;
    if (!categoryData.master[selectCategory.value].node[selectNodeKey.value].variable) {
      categoryData.master[selectCategory.value].node[selectNodeKey.value].variable = {};
    }
    if (!categoryData.master[selectCategory.value].node[selectNodeKey.value].variable[selectVariableName.value]) {
      categoryData.master[selectCategory.value].node[selectNodeKey.value].variable[selectVariableName.value] = {variableName: selectVariableName.value}
    }
  } else {
    selectCategory.value = null;
    selectNodeKey.value = null;
    selectVariableName.value = null;
  }
  selectLevel.value = node.level;
}

</script>
<script lang="ts">
export default {
  name: "SillyCategorySchemaForm",
}
</script>

<style scoped>

</style>